<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <input type="text" placeholder="请输入手机号">

    <input type="text" placeholder="请输入邮箱">

    <input type="text" placeholder="请输入用户名">

    <script>
        // []里面的你内容可有可无
        // var reg = /正则表达式主体/[修饰符]
        // var reg = new RegExp("正则表达式主体", ["修饰符"])
        // 元字符
        // \d  0-9
        // \w  数字 字母 下划线
        // \s  空白字符
        // 表达式
        // [0-9] 0-9
        // [a-z] 匹配a-z
        // [^a-z] 匹配不是a-z的任意字符
        // [\u4e00-\u9fa5]
        // 限定符
        // ^ 匹配开头位置
        // $ 匹配结束位置
        // 转义字符
        // \.   匹配.
        // 量词
        // n*  可有可无n
        // n+  至少一个n
        // n?  最多一个n
        // n{3} 匹配3个n
        // n{2,} 匹配至少2个n
        // n{3,5} 匹配3-5个n


        // 手机号正则
        var input = [...document.querySelectorAll("input")],
            regIpone = /(^1[3-9]\d)(\d{5})(\d{3})$/,
            regEmail = /^\w+@\w+\.(con|com|net)$/,
            regName = /^[\u4e00-\u9fa5]{2,4}$/


        input[0].addEventListener("blur", function () {
            var flag = regIpone.test(input[0].value)
            console.log(flag)
        })

        input[1].addEventListener("blur", function () {
            var flag = regEmail.test(input[1].value)
            console.log(flag)
        })

        input[2].addEventListener("blur", function () {
            var flag = regName.test(input[2].value)
            console.log(flag)
        })

    </script>

</body>

</html>